<?php 
require_once('config.php');
require_once('functions.php'); 
?>
<!DOCTYPE html>
<!--[if IE 7]>         <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9"> <![endif]-->
<html class="no-js">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
	
	<meta property="og:image" content="<?php echo SITE_URL;?>img/logo.png"/>
	<?php if(isset($_GET['ref']) && $_GET['ref'] ==1)
	{ ?>
		<meta property="og:url" content = "<?php echo SITE_URL;?>?ref=1"/>
		<meta property="og:title" content="Passion for Coffee" />
		<meta property="og:description" content="I have shared my #PassionForCoffee! Share yours and win an invite to the Starbucks launch in Bengaluru!">	
	<?php
	}
	else
	{ ?>	
		<meta property="og:url" content = "<?php echo SITE_URL;?>"/>
		<meta property="og:title" content="Starbucks Launch in Bengaluru" />
		<meta property="og:description" content="Warm up to Starbucks! Share your excitement through special moments with your friends and win an invite to the Starbucks launch in Bengaluru!">	
	<?php 
	} ?>
	<title>Starbucks Launches in Bengaluru</title>
	<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
	<link rel="shortcut icon" type="image/png" href="<?php echo SITE_URL; ?>images/favicon.png"/>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
	<link href="css/jquery.countdown.css" type="text/css" rel="stylesheet"/>
	<link href="css/style.css" type="text/css" rel="stylesheet"/>
	<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css" type="text/css" rel="stylesheet">
	<link href="css/hyderabad-style.css" type="text/css" rel="stylesheet"/>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/jquery.plugin.js" type="text/javascript"></script>
	<script src="js/jquery.countdown.min.js" type="text/javascript"></script>
	<script src="http://instansive.com/widget/js/instansive.js"></script>
	<!-- <script src="https://www.google.com/jsapi" type="text/javascript"></script> -->
	<script type="text/javascript" src="js/calltimer.js"></script>	
	<script type="text/javascript">
		var site_url = '<?php echo SITE_URL; ?>';
		var coffee_click = <?php echo get_clicks()?>;
		var limit = 9;
		var offset = 0;
		var page = 0;
		
		window.addEventListener("resize", function() {
			console.log(window.innerWidth);
		});
	</script>
	<script src="js/script.js?v=3" type="text/javascript"></script>
	<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script src="js/lazyload.js" type="text/javascript"></script>
	<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> 
	<script src="js/cup-animation.js" type="text/javascript"></script>
	<script>
		function show_instragram(){
			$("#tweet_buzz").fadeOut(function(){
				$("#instragram_feed").fadeIn();
				$(".social-widget").removeClass('active')
				$("#instrgram-widget").addClass('active');
				$("#instragram_feed").css('display','inline-block');
				$("#instragram_feed").css('width','80%');
				$(".instansive-widget").css('width','100%');				
				
			});
			ga_click('tab instagram');
		}
		function show_twitter(){
			$("#instragram_feed").fadeOut(function(){
				$("#tweet_buzz").fadeIn();
				$(".social-widget").removeClass('active')
				$("#twitter-widget").addClass('active');
			});
			ga_click('tab twitter');
		}
				
	</script>
</head>
<body>
<script src="http://platform.twitter.com/widgets.js"></script>
<div id="fb-root"></div>
<?php if(!empty($_GET['contest_id']) && isset($_SESSION['contest_submit']))
	{
		$contest = get_contest_details($_GET['contest_id']);
		unset($_SESSION['contest_submit']);
	}
?>
<script>
<?php if(isset($_GET['status']) && $_GET['status'] == 'success') { 
?>
	$(function(){
		$('#myModal1').modal('show');
	});
<?php } ?>
function generate_twitter_url(curr)
{
	var url ="https://twitter.com/intent/tweet?original_referer="+site_url;
	url += "&url="+site_url;
	url += "&text="+encodeURIComponent("Warm up to Starbucks! Share your #passionforcoffee to win and invite to the Starbucks Bengaluru launch!");
	curr.attr('href',url);
	ga_click('twitter invite');
}
function generate_twitter_share_url(curr)
{
	var url ="https://twitter.com/intent/tweet?original_referer="+site_url;
	url += "&url="+site_url;
	url += "&text="+encodeURIComponent("I have shared my #PassionForCoffee, Share yours and win an invite to the Starbucks launch in Bengaluru!");	
	curr.attr('href',url);
	ga_click('twitter url share');
}
window.fbAsyncInit = function() {
    FB.init({
        appId   : '<?php echo FB_APP_ID; ?>',
        oauth   : true,
        status  : true, // check login status
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true // parse XFBML
    });

  };
 function fb_share_post(elem)
 {
 	
 	FB.ui(
       {
         method: 'feed',
         name: 'Passion for Coffee',
         link: site_url+'?ref=1'//,
         //caption: 'I have shared my #PassionForCoffee! Share yours and win special Starbucks merchandise!!'
       },
       function(response) {
       
       }
     );
	 ga_click('facebook share');
 }
function fb_login(){
   FB.ui(
      {
       method: 'feed',
       name: 'Starbucks India',
       link: site_url,
       picture: site_url+'/img/logo.png'
      },
      function(response) {
        if (response && response.post_id) {
          console.log('Post was published.');
        } else {
          console.log('Post was not published.');
        }
      }
    );
	ga_click('facebook invite');
}

(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}()); 

$(function(){
		$("img.lazy").lazyload();
		$('.fb_invite').hover(
			function(){
				$(this).find('.fb_unhover').hide();
				$(this).find('.fb_hover').show();
			},
			function(){
				$(this).find('.fb_unhover').show();
				$(this).find('.fb_hover').hide();
			}
		);
		
		$('.tw_invite').hover(
			function(){
				$(this).find('.tw_unhover').hide();
				$(this).find('.tw_hover').show();
			},
			function(){
				$(this).find('.tw_unhover').show();
				$(this).find('.tw_hover').hide();
			}
		);
		
		
	});

	var images = new Array()
	function preload() {
		for (i = 0; i < preload.arguments.length; i++) {
			images[i] = new Image()
			images[i].src = preload.arguments[i]
		}
	}	
	preload(
		'<?php echo SITE_URL; ?>images/drop_sprite.png'
	);

</script>
<?php 
	$approved=1;$limit=9;
	$entries = get_contest_details(0,$approved,$limit); 
?>
<div class="container-fluid padding_removal">
	<div class="row">
		
<div id="countdown_wrapper" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
			<div id="defaultCountdown" class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2 is-countdown">
				<span class="countdown-row countdown-show4">
					<span class="countdown-section">
						<div class="disp_inline">
							<span class="countdown-amount days-countdown-amount">CELEBRATE THE MONTH OF COFFEE WITH STARBUCKS!</span>
						</div>
					</span>
				</span>
			</div>
		</div>		
	</div><!-- rows ends -->	
	 <!-- row ends -->
	<?php /***Cup Animation Section Start */ ?>
	<div id="section2" class="row">
		
		 <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 row_tri" >		
			
				 <div class="col-xs-12 col-md-3 col-sm-3 col-lg-2 col-sm-offset-1 col-lg-offset-2" style="margin-top:8%">
					<div class="passion_coffee" data-toggle="modal" data-target="#myModal1">BENGALURU! <span>Share your Passion for Coffee</span></div>		 
					<div class="passion_text">This month, celebrate coming together and meeting friends over coffee with Starbucks Bengaluru. Share your special coffee moments with us by participating in the Passion for Coffee contest!</div>
					<div class="fill_click invite_link">
						<button data-target="#myModal" data-toggle="modal" class="btn fill_btn warm_up_text_invite" type="submit" id="social_share_click">INVITE FRIENDS TO PARTICIPATE</button>		 
					</div>	
					
				 </div>	
				<div class="show_mobile line clearfix"></div>
				<div class="fill_coffee show_mobile">FILL THE CUP WITH YOUR LOVE FOR COFFEE!</div>	
				<div class="center_fill_click">
							<button id="m_fill_click" type="submit" class="btn fill_btn">CLICK HERE TO FILL IT</button>		 
				</div> 
				 
				 <div class="col-xs-12 col-md-4 col-sm-4 col-lg-4 coffee_drop_ls">				
						
						<div class="coffee-tap"></div>
						<div id="coffee_drop"></div>					 
						<div class="coffee_mug"> </div>
						<div class="coffee_mug1"> </div> 
						 
						<div id="coffee_click_num" class="img_text"></div> 
							
						<div class="connection">CONNECTIONS OVER COFFEE</div>
						
						<div class="show_mobile">Click as many times as you like!</div>	
				 </div>
				 
				
				<div class="col-xs-12 col-md-3 col-sm-3 col-lg-2" style="margin-top:8%">
					<div class="fill_coffee hide_mobile">FILL THE CUP WITH YOUR LOVE FOR COFFEE!</div>		 
						<?php /* Coffee Press Button Start*/ ?>				 
					<div class="left_fill_click hide_mobile">
						<button id="fill_click" type="submit" class="btn fill_btn">CLICK HERE TO FILL IT</button>		 
					</div>
					<div class="fill_click hide_mobile">Click as many times as you like!</div>				
					<?php /* Coffee Press Button End*/ ?>
				 </div>		 
				 
			 
		 </div>
	</div>
	<?php 
	/***Cup Animation Section End */ ?>
	<!--row ends-->			
	<div class="bg-gray section-divider"></div>
	<div id="coffee_passion" class="row bg-gray">
		<div class="contest_title_wrapper">
			<div class="contest_title">PASSION FOR COFFEE CONTEST!</div>
		</div>
		<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-lg-6 col-lg-offset-3">
			<div class="contest_text">Share your love for coffee with the world by submitting an interesting picture and a message at any Starbucks store in Bengaluru <br/>between 15th October and 30th October</span>.</div>
		</div>
	</div><!--row ends -->
	<div class="row bg-gray" >
		<div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" style="position:relative;">
			<div class="col-xs-11 col-xs-offset-1 col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 col-lg-4 col-lg-offset-2">
				<div class="margin_top_25">
					<div class="contest_number">1</div>
					<div class="contest_number_text"><span class="contest_text_uppper">UPLOAD</span> an image of yourself at any Starbucks store in Bengaluru, which shows your bond with coffee!</div>
				</div>
				<div class="margin_top_25">
					<div class="contest_number">2</div>
					<div class="contest_number_text">Use <span class="contest_text_uppper green-text">#STARBUCKSBENGALURU </span> AND <span class="contest_text_uppper green-text">#PASSIONFORCOFFEE</span></div>
				</div>
				<div class="margin_top_25">
					<div class="contest_number">3</div>
					<div class="contest_number_text"><span class="contest_text_uppper">SHARE</span> with friends</div>
				</div>
				<div class="margin_top_25">
					<div class="contest_number">4</div>
					<div class="contest_number_text"><span class="contest_text_uppper">WIN EXCITING PRIZES</span></div>
				</div>
			
				<!--<div class="" style="margin-top: 25px;margin-left: 45px;">
					<img class="" src="img/symbol1.png"/>
					<div class="contest_number_text1">The top 20 entries will be invited to the Starbucks store launch event in Hyderabad!</div>
				</div>-->

				<div class="" style="margin-top: 20px;margin-left: 45px;">
					<img class="" src="img/symbol2.png"/>
					<div class="contest_number_text1">The top 200 entries win pre-loaded Starbucks gift cards!</div>
				</div>
				<div class="margin_top_40">
					<div class="contest_participate">PARTICIPATE HERE:</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
					<form id="contest_form" method="post" action="" enctype="multipart/form-data">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 contest_input_wrap">
								<input type="text" class="form-control contest_input" placeholder="Name" name="name" id="participant_name">
							</div>
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 contest_input_wrap">
								<input id="phone" type="text" class="form-control contest_input" placeholder="Phone#" name="phone">
							</div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 16px;">
								<input id="email" type="text" class="form-control contest_email_input" placeholder="Email" name="email">
							</div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 16px;">
								<input type="text" class="form-control contest_email_input" placeholder="Message" name="message">
							</div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:left;margin-top: 2px;font-family:myriadproregular;font-size:0.7em;color:#999999">File should not exceed 10MB. Upload in .gif, .jpg, or .png format.</div>
							<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 contest_input_wrap upload_btn">
								<button type="submit" class="btn contest_btn_upload">UPLOAD FILE</button>
								<input type="file" name="imagefile" id="imagefile" style="position:absolute;top:-210%;left:-999%;"/>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 contest_input_wrap submit_btn">
								<button id="contest_submit" type="submit" class="btn contest_btn_submit">SUBMIT</button>
								<input type="hidden" name="contest_submit" />
							</div>
							
						<!-- </div> -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 checkbox_input" style="margin-bottom: 30px;">
							<input id="tnc" class="" type="checkbox"/><span style="padding-left:5px;">I agree to the <a class="cursor_pt" style="color:#248b00" href="/Terms-and-Conditions.pdf" target="_blank" onclick="ga_click('term n conditions');">Terms & Conditions</a></span>
						</div>
						
					</form>
			</div>
			</div>
			
			<div class="col-xs-12 col-md-5 col-sm-5 col-lg-4">
				<div class="margin_top_25">
					<div class="contest_people">MANY PEOPLE HAVE SHARED THEIR PASSION FOR COFFEE.</div>
					<div class="contest_text_uppper" style="margin-top:10px;">SHARE YOURS TOO!</div>
				</div>
				<?php 
					echo '<div id="gallery_wrapper0" class="gallery-wrapper">';
					foreach($entries as $entry){ ?>
						<div class="col-xs-4 col-md-4 col-sm-4 col-lg-4 gallery gallery_ht" data-attr-name="<?php echo $entry['name']?>" data-attr-pic="<?=$entry['picture']?>" data-attr-mmsg="<?php echo $entry['message']?>">
							<span class="gallery-helper"></span>
							<img class="gallery-image lazy" style="" data-original="upload/thumb/<?php echo $entry['picture']?>"/>
						</div>
				<?php } ?>
					</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 view_all cursor_pt"><a title="view all" id="view_all_color" class="ga_click_self" href="gallery.php">VIEW ALL</a></div>
			</div>
		</div>
			
	</div><!--row ends-->
	<div class="row">
		<div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 row_tri" style="position:relative;">			
			 <div style="text-align:center;" class="section-divider"> </div>
			<div class="col-xs-12 col-md-5 col-sm-5 col-sm-offset-1 col-lg-4 col-lg-offset-2" style="margin-top: 5%;margin-bottom: 5%;">
				<div class="buzz_regular">SEE THE BUZZ ON <span class="buzz_bold green-text">#PASSIONFORCOFFEE & #STARBUCKSBENGALURU</span></div>
				
				<div class="col-md-12" style="margin-top:15px;padding-left:0px;padding-right:0px;">
				<div class="buzz_holder">				
					<div id="twitter-widget" class="social-widget active">
						<img src="images/twitter_button_dark_grey.png" style="width:67px;"/>
						<a href="javascript:show_instragram();" ><img style="width:58px;" src="images/insta_button_light_grey.png"/></a>						
					</div>
					
					<div id="instrgram-widget" class="social-widget">						
						<a href="javascript:show_twitter()" ><img style="width:58px" src="images/twitter_button_light_grey.png"/></a>
						<img src="images/insta_button_dark_grey.png" style="width:67px;"/>
							
					</div>
					
				</div>
					
					<div id="tweet_buzz" >						
						<a class="twitter-timeline"  href="https://twitter.com/search?q=%23passionforcoffee++OR++%23starbucksbengaluru"  data-widget-id="504917118056284160"  width="100%" height="410">Tweets about "#passionforcoffee  OR  #starbucksbengaluru "</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>				
					</div>					
					<div id="instragram_feed">
						<iframe src="http://instansive.com/widgets/Ncc8938d010c8130a22c5c818682060e.html" scrolling="no" allowtransparency="true" class="instansive-widget" style="width:0; border: 0; overflow: hidden;"></iframe>						
					</div>
					
				</div>
			</div>
			<div class="col-xs-12 col-md-5 col-sm-5 col-lg-4" style="margin-top: 5%;">
				<div class="buzz_regular">MANY PEOPLE HAVE SHARED THEIR PASSION FOR COFFEE.</span>
				<br/> 
				<span class="buzz_bold green-text">SHARE YOURS TOO!</span></div>
				<!-- <div class="buzz_bold">STAY TUNED FOR MORE</div> -->
				<div id='custom_map' class="xs_map lg_map"><img src="images/map.jpg" style="width:100%"></div>
				<!--<div class="map_address"><strong>Store location </strong>: Plot No.566, Road No.92, Jubilee Hills, Hyderabad - 500033.</div>-->				
				<div id="back_top" class="col-lg-12 back_to_top cursor_pt" onclick="$(window).scrollTop(0); ga_click('back to top');">BACK TO TOP</div>
			</div>
		</div>
	</div><!--row ends-->
	<?php require_once 'footer.php'; ?>
	
</div><!-- container-fluid ends -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="border-bottom: 0;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">INVITE YOUR FRIENDS TO PARTICIPATE!</h4>
      </div>
      <div class="modal-body">
        <p>INVITE FRIENDS ON:</p>
        <div class="hover_wrap">
	        <div style="display: inline-block;" class="fb_invite"><img id="" class="fb_unhover" src="img/fb_modal.png" onclick="fb_login()" />
			<img style="display:none;" class="fb_hover" src="img/fb_modal_hover.png" onclick="fb_login()"/></div> 
	        <div style="display: inline-block;" class="tw_invite">
	        <a id="tweet_invite" href="" target="_blank" onclick="generate_twitter_url($(this))">
	        <img class="tw_unhover" src="img/twitter_modal.png"/>
	        <img style="display:none;" class="tw_hover" src="img/twitter_modal_hover.png"/>
	        </a>
	        </div>
        </div>
      </div>
      <div class="modal-footer" style="border-top: 0;">
        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal ends-->

<!-- Modal -->
<?php if(!empty($contest)) { ?>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content1">
      <div class="modal-header" style="border-bottom: 0;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Thank you for being a part of this contest!</h4>
      </div>
      <div class="modal-body1">
        <h4>YOUR SUBMISSION:</h4>
        <div style="display: inline-block;">
	        <img class="" style="width:auto;height: 30%; vertical-align: top;" src="upload/standard/<?php echo $contest[0]['picture']?>"/>
        </div>
        <div class="lorem"><?php echo $contest[0]['message']?></div>
        <div class="modal_coffee">SHARE YOUR PASSION FOR COFFEE ON:</div>
         <div class="" style="margin-left: 225px;margin-bottom: 10px;">
         <div style="display: inline-block;" class="fb_invite" data-share_image = "upload/standard/<?php echo $contest[0]['picture']?>" onclick="fb_share_post($(this));">
            <img class="fb_unhover" src="img/fb_modal.png"/>
	        <img style="display:none;" class="fb_hover" src="img/fb_modal_hover.png"/>
         </div>
         <div style="display: inline-block;" class="tw_invite">
   	        <a id="tweet_invite" href="" target="_blank" onclick="generate_twitter_share_url($(this))">
	        <img class="tw_unhover" src="img/twitter_modal.png"/>
	       <img style="display:none;" class="tw_hover" src="img/twitter_modal_hover.png"/>
   	        </a>
         </div>
        </div>
      </div>
      <div class="modal-footer" style="border-top: 0;">
        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal ends-->
<?php } ?>
<script>	
	initialCup();	
</script>
<script type="text/javascript" src="js/ga_code.js"></script>
<script type="text/javascript" src="js/google_analytics.js"></script>
</body>
</html>












